<template>
    <el-config-provider :locale="locale" :size="config.size" :zIndex="config.zIndex" :button="config.button">
        <router-view></router-view>
    </el-config-provider>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import colorTool from '@/utils/color';
import i18n from '@/locales';
import { useStore } from 'vuex';

const store = useStore();
const config = ref({
    size: "default",
    zIndex: 2000,
    button: {
        autoInsertSpace: false
    }
});
const locale = computed(() => i18n.global.messages[i18n.global.locale].el);

onMounted(async () => {
    // 修改主题颜色
    const appColor = store.state.system.base.color;
    if (appColor) {
        document.documentElement.style.setProperty('--el-color-primary', appColor);
        for (let i = 1; i <= 9; i++) {
            document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(appColor, i / 10));
        }
        for (let i = 1; i <= 9; i++) {
            document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(appColor, i / 10));
        }
    }
})
</script>
<style lang="scss">
@import '@/style/style.scss';
</style>
